<template>
  <div style="min-height: 100px">
    <p>{{ item.attr_name }}</p>
    <el-checkbox-group
      v-model="checkedAttr"
      size="medium"
      @change="onChange"
    >
      <el-checkbox v-for="(val,index) in item.attr_vals" :key="index" :label="val" border />
    </el-checkbox-group>
  </div>
</template>

<script>

export default {
  name: 'ParamsItem',
  props: {
    item: {
      type: Object,
      required: true

    }
  },
  data() {
    return {
      checkedAttr: []
    }
  },
  methods: {
    onChange(val) {
      const str = val.join(',')
      this.$emit('change', str)
    }
  }
}
</script>

<style scoped>
::v-deep .el-checkbox{
  margin: 5px 10px 5px 0!important;
}
</style>
